<template>
	<view class="textAreaInput">
		<uni-easyinput type="textarea" autoHeight v-model="inputNum" :maxlength="maxNum||150" @input="bindPickerChange"
			:placeholder="placeholder||'请输入内容'">
		</uni-easyinput>
		<view class="num">
			{{inputNum.length||0}}/{{maxNum||150}}
		</view>
	</view>
</template>

<script>
	export default {
		model: {
			event: "inputFun",
		},
		props: ['maxNum', "inputNane", 'placeholder'],
		data() {
			return {
				inputNum: ""
			};
		},
		watch: {
			inputNane(newVal) {
				if (newVal) {
					this.inputNum = newVal
				}
			}
		},
		methods: {
			bindPickerChange(e) {
				this.$nextTick(() => {
					this.$emit("inputFun", e)
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.textAreaInput {
		width: 100%;
		position: relative;

		.num {
			position: absolute;
			bottom: 18rpx;
			right: 18rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: rgba(153, 153, 153, 0.8);
		}
	}

	/deep/.uni-easyinput__content {
		min-width: 649rpx;
		background-color: #FAFAFA !important;
		border-radius: 10rpx;
		border: none;
		font-weight: normal;
	}

	/deep/.uni-easyinput__content-textarea {
		padding: 16rpx 16rpx 36rpx 30rpx;
		box-sizing: border-box;
		min-height: 120rpx;
	}

	/deep/.uni-textarea-placeholder {
		font-size: 28rpx !important;
	}

	/deep/.uni-textarea-textarea {
		font-size: 28rpx !important;
		color: #333 !important;
	}
</style>